<template>
  <div class="box">
    <div class="title">标签打印设计器</div>
    <section>
      <div class="section tpl">模板管理</div>
      <!-- @current-change="selectedChange" -->
      <el-table :data="tempList" style="width: 100%" size="mini" class="tpl"
                :row-class-name="tableRowClassName"
                border highlight-current-row>
        <el-table-column label="模板名称" prop="name" width="120"></el-table-column>
        <el-table-column label="抬头名称" prop="title" width="120"></el-table-column>
        <el-table-column label="溯源地址" prop="webSite"></el-table-column>
        <el-table-column label="标签尺寸" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.width + 'mm * '+ scope.row.height + 'mm'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDesign(scope.row)">设计预览</el-button>
            <el-button type="text" size="mini" @click="handlePrint(scope.row)">生成下载</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section v-if="mngType === 'design'" >
      <div class="section">模板打印设计</div>
      <Canvas ref="designer" :formData="form" :callback="true" @ok="getList"/>
    </section>
    <section v-if="mngType === 'print'">
      <div class="section">标签生成下载</div>
      <Gener ref="printer" :formData="form" @ok="getList"/>
    </section>
  </div>
</template>
<script>
import { Table, TableColumn, Dialog, MessageBox } from 'element-ui'
import Vue from 'vue'
import {listConfig, getConfig, saveConfig, delConfig} from '@/api/config'
import Canvas from "./mng/canvas.vue";
import Gener from "./mng/gener.vue";

Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args)
const defaultTemp = () => ({
  name: '',
  title: '',
  width: 240,
  height: 240,
  titlePos:{x:0,y:0,width: 110, height: 110},
  qrCodePos:{x:0,y:0,width: 140, height:140},
  barCodePos:{x:0,y:155,width: 135, height: 65},
  titleStyle:{},
  barCodeStyle:{},
  columns: 7,
  divider: true
})
import { OutStockData, InStockData } from '@/data/test'
export default {
  components: {
    Canvas, Gener
  },
  data() {
    return {
      visible: false,
      mngType: '',
      value: {},
      tempList: [],
      form: defaultTemp(),
      rules: {
        title: { required: true, message: '请输入模板名称' },
        type: { required: true, message: '请选择模板类型' },
        width: { required: true, message: '请输入模板宽度' },
        height: { required: true, message: '请输入模板高度' },
        columns: { required: true, message: '请输入打印列数' },
        divider: { required: true, message: '请输入错位打印标志' },
      },
      printForm: {
        tempIndex: '',
        data: '',
      },
      printRules: {
        tempIndex: { required: true, message: '请选择模板' },
        data: { required: true, message: '请输入模板测试数据' },
      },
      testData: {
        OutStock: JSON.stringify(OutStockData),
        InStock: JSON.stringify(InStockData),
      },
    }
  },
  created() {
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Dialog)
    this.getList();
  },

  methods: {
    getList(){
      listConfig().then(rsp=>{
        this.tempList = rsp.rows;
      });
    },
    selectedChange(row){
      getConfig({name:row.name}).then(rsp=>{
        this.form = rsp;
       //this.$refs.designer.refresh();
      });
    },
    tableRowClassName({row, rowIndex}) {
      if (row.name === this.form.name) {
        return 'selected-row';
      }
      return '';
    },
    handleDesign(row){
      this.mngType = 'design';
      getConfig({name:row.name}).then(rsp=>{
        this.form = rsp;
      });
    },
    // 预览
    handlePrint(row) {
      this.mngType = 'print';
      getConfig({name:row.name}).then(rsp=>{
        this.form = rsp;
        this.$refs.printer.refresh(rsp);
      });
    },
    // 删除
    handleDelete(row) {
      var that = this;
      this.$confirm('确认删除该条数据吗？', '确认信息')
          .then((isPass) => {
            if (isPass) {
              delConfig({name:row.name}).then(rsp=>{
                that.$message({
                  message: '删除成功',
                  type: 'success'
                });

                that.getList();
              });
            }
          })
          .catch()
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 1000px;
  margin: auto;
  padding: 10px 0;
  font-family: Arial, Helvetica, sans-serif;
}
.title {
  text-align: center;
  font-size: 24px;
  color: #1890ff;
  margin: 5px;
  font-weight: bold;
}
.section {
  font-size: 18px;
  color: #333333;
  padding: 5px 0;
}

::v-deep .el-table.tpl {
  .el-table__row {
    /*cursor: pointer;*/
  }

  .el-table__row.current-row {
    //color: #409EFF;
  }
}
</style>
